<template>
  <div class="_jiagou">
    <div class="_top">
      <span class="_title">组织架构</span>
      <div class="_type">
        <span>图例: </span>
        <div class="_color_box">
          <span class="_color" style="background-color: #4049e2"></span>
          <span class="_text">集团</span>
        </div>
        <div class="_color_box">
          <span class="_color" style="background-color: #ffd784"></span>
          <span class="_text">行政部门</span>
        </div>
        <div class="_color_box">
          <span class="_color" style="background-color: #c0ffbf"></span>
          <span class="_text">部门小组</span>
        </div>
      </div>
    </div>
    <v-chart class="vue-chart" :option="option" autoresize />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { TreeChart } from "echarts/charts";

import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";

use([
  CanvasRenderer,
  TreeChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

const data = {
  name: "洛州灵霸商贸有限公司",
  label: { backgroundColor: "#4049E2", color: "#fff" },
  children: [
    {
      name: "采购部",
      label: { backgroundColor: "#FFE684" },
      children: [
        { name: "采购一组", label: { backgroundColor: "#C0FFBF" } },
        { name: "采购二组", label: { backgroundColor: "#C0FFBF" } },
      ],
    },
    { name: "财务部", label: { backgroundColor: "#FFE684" } },
    { name: "质量部", label: { backgroundColor: "#FFE684" } },
    { name: "仓运部", label: { backgroundColor: "#FFE684" } },
    {
      name: "销售部",
      label: { backgroundColor: "#FFE684" },
      children: [
        { name: "销售一组", label: { backgroundColor: "#C0FFBF" } },
        { name: "销售二组", label: { backgroundColor: "#C0FFBF" } },
        { name: "销售三组", label: { backgroundColor: "#C0FFBF" } },
      ],
    },
    { name: "产品部", label: { backgroundColor: "#FFE684" } },
  ],
};
const option = ref({
  tooltip: {
    trigger: "item",
    triggerOn: "mousemove",
  },
  series: [
    {
      type: "tree",
      data: [data],
      top: "10%",
      left: "10%",
      bottom: "20%",
      right: "10%",
      avoidLabelOverlap: true, //防止标签重叠
      roam: true, //移动+缩放  'scale' 或 'zoom'：只能够缩放。 'move' 或 'pan'：只能够平移。
      scaleLimit: {
        //缩放比例
        min: 0.7, //最小的缩放值
        max: 4, //最大的缩放值
      },
      symbol: "circle", //图形形状  rect方形  roundRect圆角 emptyCircle圆形 circle实心圆
      symbolSize: 14, //状态大小
      layout: "orthogonal",
      orient: "TB",
      lineStyle: {
        //结构线条样式
        width: 0.7,
        color: "#1E9FFF",
        type: "broken",
      },
      label: {
        //节点文本样式
        backgroundColor: "#81c5f7",
        position: "bottom",
        verticalAlign: "middle", //文字垂直对齐方式
        align: "center",
        borderColor: "#1E9FFF",
        color: "#000",
        borderWidth: 1,
        borderRadius: 5,
        padding: 5,
        height: 40,
        offset: [0, 30], //节点文字与圆圈之间的距离
        fontSize: 11,
        // 节点文本阴影
        shadowBlur: 10,
        shadowColor: "rgba(0,0,0,0.25)",
        shadowOffsetX: 0,
        shadowOffsetY: 2,
      },
      expandAndCollapse: true,
      leaves: {
        //叶子节点文本样式
        label: {
          //backgroundColor: '#81c5f7',
          backgroundColor: "#fff",
          color: "#333",
          position: "bottom",
          rotate: 0, //标签旋转。
          verticalAlign: "middle",
          align: "center",
          //或者
          overflow: "break", //break为文字折行，  truncate为文字超出部分省略号显示
          lineOverflow: "truncate", //文字超出高度后 直接截取
        },
      },
      animationDurationUpdate: 750,
    },
  ],
});
</script>

<style lang="less" scoped>
._jiagou {
  width: calc(100% -20px);
  padding: 10px;
}

._top {
  width: 100%;

  ._title {
    font-size: 23px;
    font-weight: 400;
    line-height: 70px;
  }

  ._type {
    display: flex;
    flex-direction: row;

    ._color_box {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0 10px;
      span {
        font-size: 13px;
      }

      ._color {
        width: 40px;
        height: 20px;
        display: block;
        margin-right: 5px;
        border-radius: 5px;
      }
    }
  }
}

.vue-chart {
  width: calc(100%);
  height: 500px;
}
</style>
